import { Footer } from '@/components';
import { login, updatePassword } from '@/services/ant-design-pro/api';
import { getFakeCaptcha } from '@/services/ant-design-pro/login';
import {
  AlipayCircleOutlined,
  LockOutlined,
  MobileOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  WeiboCircleOutlined,
} from '@ant-design/icons';
import { Button, Checkbox, Form, type FormProps, Input } from 'antd';
import {
  LoginForm,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, Helmet, SelectLang, useIntl, useModel } from '@umijs/max';
import { Alert, message, Tabs } from 'antd';
import { createStyles } from 'antd-style';
import React, { useEffect, useState } from 'react';
import { flushSync } from 'react-dom';
import Settings from '../../../config/defaultSettings';
import { history } from 'umi'; 
import Center from '@/pages/account/center';
import './index.less';

const useStyles = createStyles(({ token }) => {
  return {
    action: {
      marginLeft: '8px',
      color: 'rgba(0, 0, 0, 0.2)',
      fontSize: '24px',
      verticalAlign: 'middle',
      cursor: 'pointer',
      transition: 'color 0.3s',
      '&:hover': {
        color: token.colorPrimaryActive,
      },
    },
    lang: {
      width: 42,
      height: 42,
      lineHeight: '42px',
      position: 'fixed',
      right: 16,
      borderRadius: token.borderRadius,
      ':hover': {
        backgroundColor: token.colorBgTextHover,
      },
    },
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh',
      overflow: 'auto',
      backgroundImage:
        "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
      backgroundSize: '100% 100%',
    },
  };
});

const ActionIcons = () => {
  const { styles } = useStyles();

  return (
    <>
      <AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.action} />
      <TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.action} />
      <WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.action} />
    </>
  );
};

const Lang = () => {
  const { styles } = useStyles();

  return (
    <div className={styles.lang} data-lang>
      {SelectLang && <SelectLang />}
    </div>
  );
};

const LoginMessage: React.FC<{
  content: string;
}> = ({ content }) => {
  return (
    <Alert
      style={{
        marginBottom: 24,
      }}
      message={content}
      type="error"
      showIcon
    />
  );
};

const Login: React.FC = () => {
  const [userLoginState, setUserLoginState] = useState<API.LoginResult>({});
  const [type, setType] = useState<string>('account');
  const { initialState, setInitialState } = useModel('@@initialState');
  const { styles } = useStyles();
  const intl = useIntl();


  const handleGoBack = ()=>{
    history.push({pathname:'/talent'});
  }

  const handleSubmit = async (values: any) => {
    const {oldPassword, newPassword, newPasswordConfirm} = values;

    if(newPassword !== newPasswordConfirm){
      message.error('两次输入密码不同');
      return;
    }

    const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
    if(!regex.test(newPassword)){
      message.error('密码需包含大写字母、小写字母、一个数字，且长度至少为8个字符')
      return; 
    }
    updatePassword(values).then((res)=>{
      if(res.data){
        message.success('修改成功');
        setTimeout(() => {
          history.push('/login');
        }, 1000);
      }else{
        message.error(res.message)
      }
    })
  };
  const { status, type: loginType } = userLoginState;

  return (
    <div 
      className="container"
      style={{
        display: 'flex',
        justifyContent: 'center', /* 水平居中 */  
        // alignItems: 'center', /* 垂直居中 */  
        flexDirection: 'row',
        height: '100vh',
        overflow: 'auto',
        backgroundImage:
          "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')",
        backgroundSize: '100% 100%',
      }}
    >
      <Helmet>
        <title>
          {intl.formatMessage({
            id: 'menu.login',
            defaultMessage: '登录页',
          })}
          - {Settings.title}
        </title>
      </Helmet>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          padding: 35
        }}
      >
        <div style={{
          position: 'relative',
          insetBlockStart: 2,
          fontWeight: 600,
          fontSize: 33,
          marginBottom: 20,
          textAlign: 'center'
        }}>
          修改密码
        </div>
      <Form
        style={{
          // textAlign: 'center',
          // display: 'flex',
          // justifyContent: 'center', /* 水平居中 */  
          // alignItems: 'center', /* 垂直居中 */  
          minWidth: 300,
          maxWidth: '2vw',
        }} 
        size="large"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        onFinish={handleSubmit}
      >
        <Form.Item
          label="原密码"
          name="oldPassword"
          rules={[{ required: true, message: '请输入原密码' }]}
        >
          <Input.Password placeholder="原密码"/>
        </Form.Item>
        <Form.Item
          label="新密码"
          name="newPassword"
          rules={[{ required: true, message: '请输入新密码' }]}
        >
          <Input.Password placeholder="新密码"/>
        </Form.Item>
        <Form.Item
          label="新密码确认"
          name="newPasswordConfirm"
          rules={[{ required: true, message: '请再次输入新密码' }]}
        >
          <Input.Password  placeholder="确认新密码"/>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <div style={{display: 'flex', justifyContent: ' space-around'}}>
            <Button onClick={()=> handleGoBack()}>
              取消
            </Button>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </div>
        </Form.Item>
      </Form>
      </div>
    </div>
  );
};

export default Login;
